<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" href="libs/bootstrap-4/css/bootstrap.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/category.css">
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap-4/js/bootstrap.bundle.js"></script>
</head>

<body>
    <!--头部开始-->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <h1 class="navbar-brand main-title" href="index.html">环球鞋网</h1>
            <button class="navbar-toggler navbar-button" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <h2 class="nav-link">
                            <a href="index.html">首页</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=1">限时秒杀</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=2">捕头严选</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="category.html?cid=3">优选爆款</a>
                        </h2>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <h2 class="nav-link dropdown-toggle private-information" href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown" aria-expanded="false">
                                个人中心
                            </h2>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="myorder.html">我的订单</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="car.html">购物车</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">收藏商品</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="information.html">用户信息</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">商家后台</a>
                            </h2>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">联系客服</a>
                            </h2>
                        </li>
                        </li>
                    </ul>
                </form>
            </div>
        </nav>
        <!--头部结束-->
    </header>
    <!--头部结束-->
    <!--标志和搜索框开始-->
    <div class="container px-0">
        <div class="row header-two">
            <div class="logo h-100 col-auto">
                <img src="images/logo.png" class="img-fluid">
            </div>
            <div class="search">
                <form method="post" action="#"  onclick="return false">
                    <input type="text" placeholder="请输入你想查询的商品名"  id="SearchInput" name="keyWord">
                    <button type="submit" onclick="jumpToSearch()">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuotubiao"></use>
                        </svg>
                    </button>
                </form>
            </div>
            <div></div>
        </div>
    </div>
    <!--标志于搜索框结束-->
    <!-- 面包屑开始 -->
    <div class="container px-0">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li>您当前的位置：</li>
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">限时秒杀</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- 面包屑结束 -->

    <!-- 商品开始 -->
    <div class="container ml-10">
        <div class="card-deck h-50 mt-4 row" id="productDiv1">
        </div>
    </div>
    <!-- 商品结束 -->
    <!-- 分页开始 -->
    <div class="row justify-content-center mt-4">
        <div class="col-6 d-flex justify-content-center mt-1">
            <nav aria-label="Page navigation example">
                <ul class="pagination" id="pageNav">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- 分页结束 -->
</body>
<script src="fonts/iconfont.js"></script>
<script>
    let pageNav = document.querySelector('#pageNav');
    /**
     * 根据起始位置生成li
     */
    let appendLi = function (beginIndex, endIndex, pageIndex) {
        let numberLi = "";
        for (let i = beginIndex; i <= endIndex; i++) {
            let active = pageIndex == i ? "active" : "";
            numberLi += `<li class="page-item ${active}"><a class="page-link" href="javascript:void(0);" onclick="pageChange(${i})">${i}</a></li>`;
        }
        return numberLi;
    }

    let pageNavCompenet = function (pageIndex, totalPage){
        let li = '';
        let preLi = `<li class="page-item">
              <a class="page-link" href="javascript:void(0);" onclick="pageChange(${pageIndex-1})" aria-label="Previous">
                <span aria-hidden="true"><< 上一页</span>
              </a>
            </li>`;
        preLi = pageIndex == 1 ?'':preLi;
        let numberLi='';
        if(totalPage <= 5){
            numberLi = appendLi(1,totalPage,pageIndex);
        } else{
            if (pageIndex+2>=totalPage){
                numberLi=appendLi(totalPage-4,totalPage,pageIndex);
            }else if (pageIndex-2<=0){
                numberLi=appendLi(1,5,pageIndex);
            } else{
                numberLi=appendLi(pageIndex-2,pageIndex+2,pageIndex);
            }
        }
        let nextLi= `<li class="page-item">
              <a class="page-link" href="javascript:void(0);" onclick="pageChange(${pageIndex+1})" aria-label="Next">
                <span aria-hidden="true">下一页 >></span>
              </a>
            </li>`;
        nextLi = pageIndex == totalPage ? '':nextLi;
        li = preLi + numberLi + nextLi;
        pageNav.innerHTML = li;
    }



    let pageChange = function (pageIndex) {

        let url=location.href;
        let index=url.search("=");
        let cid=url.substring(index+1);

        //后端来不及弄数据了 只好先写成这样了
        if(cid==1){
            $(".breadcrumb-item").eq(1).text("限时秒杀");
        }else if(cid==2){
            $(".breadcrumb-item").eq(1).text("捕头严选");
        }else if(cid==3){
            $(".breadcrumb-item").eq(1).text("优选爆款");
        }else if(cid==4){
            $(".breadcrumb-item").eq(1).text("Nike专场");
        }else if(cid==5){
            $(".breadcrumb-item").eq(1).text("新百伦领跑");
        }else if(cid==6){
            $(".breadcrumb-item").eq(1).text("PUMA彪马");
        }else if(cid==7){
            $(".breadcrumb-item").eq(1).text("Adidas阿迪达斯");
        }else if(cid==8){
            $(".breadcrumb-item").eq(1).text("Vans范斯");
        }else if(cid==9){
            $(".breadcrumb-item").eq(1).text("CONVERSE匡威");
        }else if(cid==10){
            $(".breadcrumb-item").eq(1).text("AJ乔丹");
        }else if(cid==11){
            $(".breadcrumb-item").eq(1).text("ANTA安踏");
        }else if(cid==12){
            $(".breadcrumb-item").eq(1).text("LI-NING李宁");
        }else if(cid==13){
            $(".breadcrumb-item").eq(1).text("Fila斐乐");
        }

        //2.发送请求
        fetch("page.product?cid="+cid+"&pageIndex="+pageIndex).then(response=>response.json()).then(data=>{
            //{flag:true,code:200200,message:"success",data:{tatal:30,pageIndex:1,pageTotal:8,data:[{...}] }}
            console.log(data);
            loadData(data.data.data);
            pageNavCompenet(data.data.pageIndex,data.data.pageTotal);
        });
    }



    //默认打开第一页数据
    pageChange(1);

    let loadData = function (categoryData) {
        let productStr = "";
        categoryData.forEach((r, index) => {
            productStr += `
            <div class="mt-4 ml-0 col-xl-3 col-lg-4 col-md-6 col-sm-6 px-0">
                <div class="card h-100">
                    <a href="product.html?pid=${r.id}" class="card-img">
                        <img src="${r.pimage}" class="card-img-top selected-img" alt="...">
                    </a>
                    <div class="card-body">
                        <a href="product.html?pid=${r.id}">
                            <h1 class="card-title">${r.name}</h1>
                        </a>
                        <h2 class="card-title text-danger">￥${r.price}</h2>
                        <p class="card-text">${r.desc}</p>
                    </div>
                </div>
            </div>
            `;
        });
        let productDiv1 = document.querySelector("#productDiv1");
        productDiv1.innerHTML = productStr;
    }

    // search函数
    function jumpToSearch() {
        let SearchInput = document.querySelector("#SearchInput");
        let keyWord = SearchInput.value;
        //对keyWord进行格式校验
        if (keyWord.trim().length == 0) {
            //keyWord为空 给出友好提示
            return "空空如也";
        } else {
            location.href = "searchProducts.html?keyWord=" + keyWord.trim();
        }
    }

</script>
</html>